<template>
    <el-dialog v-model="dialogVisible" title="文件详情" width="600px" :close-on-click-modal="false" append-to-body>
        <!-- Add table and pagination -->
        <el-table :data="tableData" style="width: 100%; margin-top: 20px" border v-loading="tableLoading"
            element-loading-text="加载中..." empty-text="暂无数据">
            <el-table-column prop="id" label="序号" width="180" />
            <el-table-column prop="title" label="资料名称" />
            <el-table-column label="操作" width="120">
                <template #default="{ row }">
                    <el-button :loading="row.watchLoading" @click="handleActionClick(row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-if="total > 0" v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[10, 50, 100, 200]" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next" class="pagination" />
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    docid: {
        type: [String, Number],
        default: ''
    }
});

const emit = defineEmits(['update:visible']);

const dialogVisible = ref(props.visible);
const currentPage = ref(1);
const pageSize = ref(100);
const total = ref(0);
const tableData = ref([]);
const tableLoading = ref(false);

// 监听弹窗显示状态
watch(() => props.visible, (newValue) => {
    dialogVisible.value = newValue;
    if (newValue && props.docid) {  // 注意这里使用 props.docid
        fetchTableData(); // 当对话框打开且有 docid 时加载数据
    }
});

watch(dialogVisible, (newValue) => {
    emit('update:visible', newValue);
});



const handleSizeChange = (val) => {
    pageSize.value = val;
    fetchTableData();
};

const handleCurrentChange = (val) => {
    currentPage.value = val;
    fetchTableData();
};

const fetchTableData = async () => {
    tableLoading.value = true;
    try {
        const { data } = await request.post('/zhsj/api/getdocpagebyid3', null, {
            params: {
                archid: props.docid,
                pageindex: currentPage.value,
                pagesize: pageSize.value
            }
        });

        if (data) {
            tableData.value = (data.records || []).map(record => ({
                ...record,
                watchLoading: false
            }));
            total.value = data.total || 0;
        }
    } catch (error) {
        console.error('Failed to load table data:', error);
        ElMessage.error('获取相关数据失败');
    } finally {
        tableLoading.value = false;
    }
};

const handleActionClick = async (row) => {
    row.watchLoading = true;
    try {
        const { data } = await request.post(`${import.meta.env.VITE_BASE_API}/zhsj/api/viewfile3?filepath=${row.filepath}&savefilename=${row.savefilename}&extension=${row.extension}`);
        window.open(`${import.meta.env.VITE_BASE_API}/${data}`, '_blank').focus();
    } finally {
        row.watchLoading = false;
    }
};
</script>

<style scoped>
.el-descriptions {
    margin: 20px 0;
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
